﻿@model CropInput
@{
    ViewBag.Title = "Picture";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="@Url.Content("~/Content/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='@Url.Content("~/Scripts/jquery.Jcrop.min.js")' ></script>

<script language="Javascript" type="text/javascript">

        $(function() {
            jQuery('#cropbox').Jcrop({
                setSelect: [ 0, 0, 200, 150 ],
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1.333
            });
        });
        
         function updateCoords(c) {
		        jQuery('#x').val(c.x);
		        jQuery('#y').val(c.y);
		        jQuery('#w').val(c.w);
		        jQuery('#h').val(c.h);
		    }

        function showPreview(coords) {
        updateCoords(coords);
        
            if (parseInt(coords.w) > 0) {
                var rx = 200 / coords.w;
                var ry = 150 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * @Model.ImageWidth) + 'px',
                    height: Math.round(ry * @Model.ImageHeight) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }		
</script>
<div style="margin:auto; width:900px;">
<div style="float:left;" >
    <img src='@Url.Content("~/pictures/Coupons/temp/" + Model.Id + ".jpg")' id="cropbox" alt="crop" />
</div>
<div style="width: 200px; height: 150px; overflow: hidden;float:right;">
    <img src='@Url.Content("~/pictures/Coupons/temp/" + Model.Id + ".jpg")' id="preview" alt="thumb" />
</div>
<br class="cbt"/>
<br />
@using(Html.BeginForm()) {
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="submit" value="@Mui.select_thumbnail" />
        }
        </div>